<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			.clock {
				width: 600px;
				height: 600px;
				margin: 50px auto;
				background: url(images/clock.jpg) no-repeat;
				position: relative;
			}

			.clock div {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

			}

			.h {
				background: url(images/hour.png) no-repeat center center;
			}

			.m {
				background: url(images/minute.png) no-repeat center center;
			}

			.s {
				background: url(images/second.png) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="h" id="hour"></div>
			<div class="m" id="minute"></div>
			<div class="s" id="second"></div>
		</div>
	</body>
	<script>
		var hour = document.getElementById("hour");
		var minute = document.getElementById("minute");
		var second = document.getElementById("second");
		// 开始定时器
		var s = 0,
			m = 0,
			h = 0,
			ms = 0;
		setInterval(function() {
			// 内容就可以了
			var date = new Date(); // 得到最新的时间
			ms = date.getMilliseconds(); // 现在的毫秒数
			s = date.getSeconds() + ms / 1000; //  得到秒 1.3 s
			m = date.getMinutes() + s / 60; //  得到的是分数  45.6分钟
			h = date.getHours() % 12 + m / 60;
			//console.log(h);
			//旋转角度
			// 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
			second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
			//  变化            旋转    deg  度
			minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
			hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";
			second.style.MozTransform = "rotate(" + s * 6 + "deg)";
			//  变化            旋转    deg  度
			minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
			hour.style.MozTransform = "rotate(" + h * 30 + "deg)";
		}, 100);
	</script>
</html>
